<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/" method="post">
        <label for="name">用户名:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"required>
        <br>
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
        <br>
        <input type="checkbox" id="subscribe" name="subscribe" checked>
        <label for="subscribe">订阅推送消息</label>
        <br>
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>
    <div class="title">主要网页标题</div>
    <div class="content">
    <div class="left_content">
        <p>菜单</p>
        <P>HTML</P>
        <p>CSS</p>
        <p>javascript</p>
    </div>
    <div class="right_content">2</div>
    </div>
    <div class="footer">
        这是底部
    </div>    
    <p class="change_color">zzzz<p>
        <p>将鼠标以上并点击此链接：<a href="http://www.baidu.com">百度.com</a></p>
    <style>
        .title{
            border: 1px solid green;
            background-color: orange;
        }
        .content{
            display: flex;
        }
        .footer{
            border: 1px solid gray;
            background-color: aqua;
            text-align: center;
        }
        .left_content{
            border: 1px solid red;
            background-color: yellow;
            width: 30%;
            height: 300px;
        }
        .right_content{
            border: 1px solid green;
            background-color: blueviolet;
            width: 70%;
            height: 300px;
        }
        .change_color {
            color:orange;
            border: 1px solid red;
            background-color:yellow;
            text-align: center;
            width:200px;
            height: 300px;
        }
        .change_color:hover{
            background: green;
        }
    </style>
    </body>
    </html>